<template>
    <div>
        <!--        表格内容-->
        <el-card class="box-card" style="margin-top:15px;">
            <!--三个按钮z                -->
            <el-row>
                <el-col :span="4">
                    <el-button type="primary" @click="add_goods">添加</el-button>
                </el-col>
                <el-col :span="12">
                    <el-input placeholder="请输入内容" v-model="param.key" clearable>
                    </el-input>
                </el-col>

                <el-col :span="4">
                    <el-button type="info" icon="el-icon-search" @click="search()">搜索</el-button>
                </el-col>
            </el-row>
            <el-table border :data="tableData" style="width: 100%; margin-top: 10px">
                <el-table-column prop="username" label="用户名" width="180">
                </el-table-column>
                <el-table-column prop="password" label="密码" width="180">
                </el-table-column>
                <el-table-column prop="nickname" label="昵称" width="180">
                </el-table-column>
                <el-table-column prop="status" label="状态:0启用|1禁用" width="180">
                </el-table-column>
                <el-table-column
                    label="操作">
                    <template   slot-scope="scope">
                        <el-button type="primary" size="mini" @click="edit_goods(scope.row)">编辑</el-button>
                        <el-button type="danger" size="mini" @click="del(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页功能           -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[1, 2, 5, 10]"
                :page-size="this.param.limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="this.total">
            </el-pagination>

            <!--            ////dialog挂载一个table,实现添加功能-->
            <el-dialog  title="添加账号" :visible.sync="add_dialogVisible" width="30%">
                <!--添加菜品种类-->
                <el-form ref="form" :model="Addform" label-width="80px">
                    <el-form-item label="账号">
                        <el-input v-model="Addform.username"></el-input>
                    </el-form-item>
                    <el-form-item    label="密码">
                        <el-input   v-model="Addform.password"   ></el-input>
                    </el-form-item>
                    <el-form-item label="昵称">
                        <el-input  v-model="Addform.nickname"  ></el-input>
                    </el-form-item>
                </el-form>

                <span slot="footer" class="dialog-footer">
                    <el-button @click="add_dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="judgeaddSave">确 定</el-button>
                </span>
            </el-dialog>

            <!-- ///dialog挂载一个table,实现编辑功能, 需要获取到该行的数据，直接填充过去-->
            <el-dialog  title="编辑表单" :visible.sync="edit_dialogVisible" width="30%">
                <!--添加菜品种类-->
                <el-form  :model="Editform" label-width="80px">
                    <el-form-item label="账号">
                        <div>{{username}}</div>
                    </el-form-item>
                    <el-form-item    label="密码">
                        <el-input   v-model="Editform.password" ></el-input>
                    </el-form-item>
                    <el-form-item  label="昵称" >
                        <el-input v-model="Editform.nickname"  ></el-input>
                    </el-form-item>
                    <el-form-item  label="是否启用">
                        <el-switch v-model="Editform.status" active-color="#13ce66" inactive-color="#ff4949"
                                   active-text="启用" inactive-text="禁用" :active-value="0" :inactive-value="1">
                        </el-switch>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="edit_dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="editSave">确 定</el-button>
                </span>
            </el-dialog>


        </el-card>

    </div>
</template>

<script>
export default {
    name: "List",
    data() {
        return {
            param:{
                key:'',
                page:1,
                limit:5,
            },
            //表格数据
            tableData: [],
            // 分页
            currentPage:1,
            total:0,
            add_dialogVisible:false,
            edit_dialogVisible:false,
            Addform:{
                username:"",
                password:"",
                nickname:"",
                role:3,
            },
            imgdata:[],
            Editform:{
                password:"",
                nickname:"",
                status:0,
                id:-1,
            },
            username:"",
        }
    },
    methods: {
        getList(){  ////查询功能，当前有哪些
            this.$ajax.get(this.$API.http+"/api/Admin/userindex", {params:this.param}).then(res=> {
                    if(res.data.code == 1){
                        this.tableData = res.data.data;
                        this.total = res.data.total;
                        console.log(this.total);
                    }
                },
                error => {
                    //请求后更新List的数据
                    window.alert(error);
                }
            )
        },
        /// 分页
        handleSizeChange(val){
            this.param.limit = val;
            this.getList();
        },
        handleCurrentChange(val){
            this.param.page = val;
            this.getList();
        },
        ///编辑功能              读取信息到编辑模块
        edit_goods(info){
            this.edit_dialogVisible = true;
            this.username = info.username;
            this.Editform.password = info.password;
            this.Editform.nickname = info.nickname;
            this.Editform.status = info.status;
            this.Editform.id = info.id;
            console.log(this.Editform);
        },
        ///编辑功能              更新
        editSave(){
            // thinkphp  save函数，当有主键时，更新，否则为新增
            this.$ajax.post(this.$API.http+"/api/Admin/useredit", this.Editform).then(res=> {
                    if(res.data.code == 1){  ///成功
                        this.$msg.success(res.data.msg);
                        this.getList();                //请求成功后更新List的数据
                        this.edit_dialogVisible = false;  //关闭弹窗
                    }
                    else{///错误
                        this.$msg.error(res.data.msg);
                    }
                },
                error => {
                    //请求后更新List的数据
                    window.alert(error);
                }
            )

        },
        judgeaddSave(){
            this.addSave();
        },
        ///增加
        addSave(){  // 增加功能///判断价格和数量是否合法
            console.log(this.Editform.img);
            this.$ajax.post(this.$API.http+"/api/register/register", this.Addform).then(res=> {
                    if(res.data.code == 1){
                        this.$msg.success(res.data.msg);
                        this.add_dialogVisible = false;  //关闭弹窗
                        this.Addform.goods_name = '';
                        this.Addform.price= 0;
                        this.Addform.img = '';
                        this.getList();
                    }
                    else{
                        this.$msg.error(res.data.msg);
                    }
                },
                error => {
                    //请求后更新List的数据
                    window.alert(error);
                }
            )
        },
        add_goods(){  ///弹窗显示
            this.add_dialogVisible = true;
        },
        edit(info){

        },
        search(){
            this.getList();
        },

        del(id){  ////删除功能// console.log(id)
            this.$ajax.get(this.$API.http+"/api/Admin/userdel", {params:{id:id}}).then(res=> {
                    if(res.data.code == 1){
                        this.$msg.success(res.data.msg);
                        this.getList();
                    }
                    else{
                        this.$msg.error(res.data.msg);
                    }
                },
                error => {
                    //请求后更新List的数据
                    window.alert(error);
                }
            )
        }
    }
    ,
    created() {
        this.getList();
    },
}
</script>

<style scoped>


</style>

